<template>
  <el-menu
    :default-active="$route.fullPath"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
    :collapse="sidebar"
  >
    <!-- <el-submenu v-for="item in routes" :index="item.path" :key="item.path">
      <template slot="title">
        <i class="iconfont" :class="item.meta.icon"></i>
        <span>{{ item.meta.title }}</span>
      </template>
      <el-menu-item
        v-for="i in item.children"
        :index="item.path + '/' + i.path"
        :key="item.path + '/' + i.path"
        >{{ i.meta.title }}</el-menu-item
      >
    </el-submenu> -->
    <!-- </el-menu> -->
    <el-submenu index="1">
      <template slot="title">
        <i class="iconfont icon-panel"></i>
        <span>首页</span>
      </template>
      <el-menu-item index="/home/dashboard">仪表盘</el-menu-item>
      <el-menu-item index="/home/data">设备数据</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="iconfont icon-luyouqi"></i>
        <span>设备</span>
      </template>
      <el-menu-item index="/device/gateway">网关</el-menu-item>
      <el-menu-item index="/device/servegroup">设备群组</el-menu-item>
      <el-menu-item index="/device/cgqlist">传感器列表</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="iconfont icon-fyxx"></i>
        <span>计费</span>
      </template>
      <el-menu-item index="/spend/accountmsg">账户信息</el-menu-item>
      <el-menu-item index="/spend/spent">充值记录</el-menu-item>
      <el-menu-item index="/spend/used">使用记录</el-menu-item> </el-submenu
    ><el-submenu index="4">
      <template slot="title">
        <i class="iconfont icon-luyouqi"></i>
        <span>测量类型</span>
      </template>
      <el-menu-item index="/test/testtype">添加测量类型</el-menu-item>
      <el-menu-item index="/test/testlist">测量类型列表</el-menu-item>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title">
        <i class="iconfont icon-anquan"></i>
        <span>安全</span>
      </template>
      <el-menu-item index="/safe/addsafe">添加密钥</el-menu-item>
      <el-menu-item index="/safe/safelist">密钥列表</el-menu-item>
    </el-submenu>
    <el-submenu index="6">
      <template slot="title">
        <i class="iconfont icon-account"></i>
        <span>账号</span>
      </template>
      <el-menu-item index="/account/addaccount">添加账号</el-menu-item>
      <el-menu-item index="/account/accountlist">账号列表</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "MyNav",
  data() {
    return {
      routes: [],
    };
  },
  computed: {
    ...mapGetters(["sidebar"]),
  },
  mounted() {
    console.log(this.$router);
    this.$router.options.routes.forEach((item) => {
      if (item.meta) {
        this.routes.push(item);
      }
    });
  },
};
</script>

<style lang="scss" scoped>
// .el-menu-vertical-demo:not(.el-menu--collapse) {
//   width: 200px;
//   min-height: 400px;
// }
.iconfont {
  margin-right: 5px;
}
</style>